我今天開始實際動手做記帳 App 的介面，學習 了React 的 JSX，並把基本畫面架構做出來

透過與AI的對話,我對我正在做的東西更加熟悉。

我認識了什麼是JSX
了解 JSX 是什麼，以及它和一般 HTML 有哪些不同，像是 class 在 JSX 中要改className

• 完成介面切版：把 App 的兩個主要區塊做出來，一個是新增消費表單，另一個是消費紀錄清單
• 接觸前端樣式：開始使用 Tailwind CSS 和 Inline Style，學習如何直接在 JSX 中調整元件的外觀。

我今天也學到了什麼是css，css以前比較常見的方式是另外建立 .css 檔案，再用class 或 className 把樣式套到元件上，例如：
.button { background-color: blue; }
但在現在的 React 開發中，CSS 的使用方式變得更有彈性，傳統 的CSS會另外建立 .css 檔案，再透過 className 套用樣式。
現在Tailwind 的CSS會直接在 JSX 的 className 裡使用預先定義好的樣式，就不用一直在不同的 CSS 檔案之間切換。
Inline Style讓我們可以直接在元件裡寫樣式，例如 style={{ color: 'red' }}。

除此之外，我也理解了為什麼要先做「靜態切版」。原本我想直接把新增資料、刪除資料等功能一起做，但實際操作後發現，如果先把畫面的架構完成，再加入 useState 等動態功能，會比較容易判斷問題到底是出在介面還是資料邏輯。

這也讓我想到之前老師教我們製作掛號系統時，老師一開始也是先使用預設資料，等基本功能完成後，再加入資料庫，讓使用者輸入的資料可以真正被儲存下來。雖然兩個專案的內容不太一樣，但開發的思路其實很相似，都是先把基本架構建立起來，再一步一步加入更完整的功能。

以前我可能只是照著老師的步驟做，現在自己實際開發後，才開始理解這樣安排的原因。